<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="base"
      th:with="pageTitle='文件热搜排行'">
<head>
    <link rel="stylesheet" th:href="@{/css/index.css}">
    <style>
        /*.footer {*/
            /*bottom:0px;*/
        /*}*/
    </style>
</head>
<body>
<th:block layout:fragment="custom_content">
    <el-form :inline="true" >

        <el-table size="mini" type="primary" :data="tableData" v-loading.body="loading" stripe  :row-class-name="rowClassName"  style="width: 920px">

            <el-table-column type="index" label="排名" width="100px"></el-table-column>

            <el-table-column label="标题" width="350px">
                <template scope="scope">
                    <a :href="'/regulation/showregulation/'+scope.row.id"><p v-html="scope.row.title"></p></a>
                </template>
            </el-table-column>
            <el-table-column prop="updateTime" label="修改时间" :formatter="dateFormat" width="180px"></el-table-column>

        </el-table>
    </el-form>
</th:block>
<th:block layout:fragment="javascript">
    <script th:src="@{/moment.js}"></script>
    <script>
        var indexVue = new Vue({
            el: '#app',
            data: function () {
                return {
                    siderWidthDialog:false,
                    siderbarWidth:15,
                    loading: false,
                    isCollapse: false,
                    defaultIndex: '1',
                    tableData: [],
                    breadcrumbs:['文件热搜排行'],

                    menus: [],
                    regulationMenus: [],
                    deptTrees:[]
                }
            },
            methods: {
                addHeight: function () {
                    var $this = this;
                    $this.$nextTick(function () {
                        changeFooterHeight();
                    })
                },

                //时间格式化
                dateFormat: function (row, column) {
                    var date = row[column.property];
                    if (date == undefined) {
                        return "";
                    }
                    return moment(date).format("YYYY-MM-DD HH:mm:ss");
                },
                rowClassName: function (row, rowIndex) {
                    //把每一行的索引放进row
                    row.index = rowIndex;
                },
                initMenu: function () {
                    var $this = this;
                    var data = commonInitMenu($this);
                },
                toggleMenu: function () {
                    this.isCollapse = !this.isCollapse;
                    window.localStorage.setItem('isCollapse',this.isCollapse);
                },
                changeSiderWidth:function(value){
                    changeSiderWidth(this,value);
                },
                openChangeSiderWidth:function(){
                    this.siderWidthDialog=true;
                }
            },
            created: function () {
                initCssProperty(this);
            }
        });

        function init() {
            indexVue.initMenu();
        }

        function search(pageNum, id) {
            var condition = {};
            $.ajax({
                cache: true,
                url: '/regulation/showmorehotsearch?newDate='+Math.random(),
                type: 'POST',
                data: JSON.stringify(condition),
                dataType: 'json',
                contentType: 'application/json',
                async: false,
                success: function (data) {
                    if (data.status == 1) {
                        var pageInfo = data.value;
                        indexVue.tableData = pageInfo.list;
                        indexVue.addHeight();
                    }
                }
            });
        }

        $(function () {
            init();
            search(1);
        })
    </script>
</th:block>
</body>
</html>